/**
 * 字节：手写函数节流throttle及在vue中的应用
 * 延伸：函数防抖:【含触发边界处理】 + 图片延时加载
 * 谷歌浏览器最快反应时间4~6ms
 */

// 防抖 和 节流 的区别：
// 防抖：频繁触发(自己规定时间间隔)事件或者操作的时候仅识别一次
// 节流：在频繁操作中，按照自己设定的时间，每间隔多长时间识别一次
// 例如：时间间隔为10ms，频繁操作100ms，防抖为1次，节流为10次

/**
 * 防抖函数
 * @param {*} func 
 * @param {*} wait 
 */
function throttle(func, wait = 3000) {
    let timer = null;
    let previous = 0;
    // 返回代理函数：等价于submit.onmousemove = proxy;
    return function proxy(...params) { // 谷歌没5ms触发一次proxy; params包括事件对象e等
        let now = new Date();
        let remaining = wait - (now - previous);
        if (remaining <= 0) { // 1.超过间隔时间
            previous = now;
            func.call(this, ...params); //传递参数，并重置this
        } else {
            if (!timer) { // 2.没超过，但未设置定时器
                timer = setTimeout(() => {
                    clearTimeout(timer);
                    timer = null;
                    previous = new Date();
                    func.call(this, ...params);
                }, remaining);
            } else { // 2.没超过，但已设置定时器
                console.log('等待延时器完毕即可。。。')
            }
        }
    }
}

document.getElementById('submit').onmousemove = throttle(function () {
    console.log('object')
})